<template>
  <!-- 默认页面 -->
  <main class="flex flex-1 m-3">
    <div class="w-full">
      <!-- 新手教程开始 -->
      <n-layout class="rounded">
        <n-layout-header class="p-3" bordered>新手教程</n-layout-header>
        <n-layout-content>
          <n-space class="h-60 flex justify-center items-center">
            <n-image
              width="200"
              class="pl-20 pt-5 pb-5 pr-5"
              :preview-disabled="true"
              src="https://cloud.keyetech.com/train-service/img/titleLogo.6b32e4c3.png"
            />
            <div class="h-52">
              <h1 class="text-2xl text-slate-600">还不会使用 ?</h1>
              <div class="text-slate-600 pt-5">只需三步轻松上手</div>
            </div>
            <n-space
              class="flex justify-center items-center"
              style="height: 100%"
              ><n-steps
                v-model:current="currentRef"
                :on-update:current="handleStepUpdate"
                ><n-step class="w-96" title="创建数据集"
                  ><p class="mt-6">在这里我们开始创建数据集</p>
                  <n-button v-if="currentRef == 1" class="mt-6" type="primary">
                    创建数据集
                  </n-button>
                </n-step>
                <n-step class="w-96" title="训练任务">
                  <p class="mt-6">在这里我们开始训练任务</p>
                  <n-button v-if="currentRef == 2" class="mt-6" type="primary">
                    训练任务
                  </n-button>
                </n-step>
                <n-step class="w-96" title="我的模型">
                  <p class="mt-6">在这里下载我们的模型</p>
                  <n-button v-if="currentRef == 3" class="mt-6" type="primary">
                    我的模型
                  </n-button>
                </n-step>
              </n-steps></n-space
            >
          </n-space>
        </n-layout-content>
      </n-layout>
      <!-- 新手教程结束-->
      <!-- 帮助中心开始 -->
      <n-layout class="rounded mt-4">
        <n-layout-header class="p-3" bordered>帮助中心</n-layout-header>
        <n-layout-content>
          <n-space class="h-60 flex justify-center items-center">
            <n-image
              width="200"
              class="pl-20 pt-5 pb-5 pr-5"
              :preview-disabled="true"
              src="https://cloud.keyetech.com/train-service/img/titleLogo.6b32e4c3.png"
            />
            <div class="h-52">
              <h1 class="text-2xl text-slate-600">还不会使用 ?</h1>
              <div class="text-slate-600 pt-5">只需三步轻松上手</div>
            </div>
            <n-space
              class="flex justify-center items-center"
              style="height: 100%"
              ><n-steps
                v-model:current="currentRef"
                :on-update:current="handleStepUpdate"
                ><n-step class="w-96" title="创建数据集"
                  ><p class="mt-6">在这里我们开始创建数据集</p>
                  <n-button v-if="currentRef == 1" class="mt-6" type="primary">
                    创建数据集
                  </n-button>
                </n-step>
                <n-step class="w-96" title="训练任务">
                  <p class="mt-6">在这里我们开始训练任务</p>
                  <n-button v-if="currentRef == 2" class="mt-6" type="primary">
                    训练任务
                  </n-button>
                </n-step>
                <n-step class="w-96" title="我的模型">
                  <p class="mt-6">在这里下载我们的模型</p>
                  <n-button v-if="currentRef == 3" class="mt-6" type="primary">
                    我的模型
                  </n-button>
                </n-step>
              </n-steps></n-space
            >
          </n-space>
        </n-layout-content>
      </n-layout>
      <!-- 帮助中心结束-->
    </div>
  </main>
</template>

<script setup lang="ts">
/**
 *
 */
import { h, onMounted, reactive, ref } from "vue";
/**
 *
 */
import { NImage, NSteps, NStep } from "naive-ui";

/**
 *
 */
const currentRef = ref<number>(1);
/**
 * 选择回调
 */
const handleStepUpdate = (newStepIndex: number) => {
  currentRef.value = newStepIndex;
};
</script>
